<template>
  <div class="goods">
    <div class="menu_wrapper">
      <ul>
        <li v-for="(good,index)  in  goods"
            :key="index"
            class="menu_item"
            :class="{current:index === currentIndex}"
            @click="goodClick(index,$event)">
          <span class="menu_text border-1px">
            <span v-if="good.type>=0"
                  class="icon"
                  :class="classMap[good.type]"></span>
            {{good.name}}
          </span>
        </li>
      </ul>
    </div>
    <div class="foods_wrapper"
         ref="foodsWrapper"
         v-if="foods.length!=0">
      <ul>
        <li v-for="(food,index) in foods"
            :key="index"
            class="food_item border_1px">
          <div class="icon">
            <img width="58"
                 height="58"
                 :src=food.icon>
          </div>
          <div class="content">
            <h2 class="name">{{food.name}}</h2>
            <p class="desc">{{food.description}}</p>
            <div class="extra">
              <span class="count">月售{{food.sellCount}}份</span>
              <span>好评率{{food.rating}}%</span>
            </div>
            <div class="price">
              <span class="now">${{food.price}}</span>
              <span class="old"
                    v-if="food.oldPrice">${{food.oldPrice}}</span>
            </div>
          </div>
          <div class="control">
            <div v-if="food.count>0"
                 @click="foodClick(food,false)"
                 class="icon-remove_circle_outline"></div>
            <div v-if="food.count>0"
                 class="count">{{food.count}}</div>
            <div @click="foodClick(food,true)"
                 class="icon-add_circle">
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="shopping_cart"
         v-show="shopTotalPrice >0">
      <p class="tatloPrice">总价格：{{shopTotalPrice}}</p>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import BScroll from 'better-scroll'
export default {
  props: ['seller'],
  name: 'goods',
  data () {
    return {
      goods: [],
      currentIndex: 0,
      foods: [],
      ShoppingCart: [],
      classMap: ['decrease', 'discount', 'special', 'invoice', 'guarantee'],
      foodsWrapper: null
    }
  },
  created () {
    axios.get('/api/goods').then(response => {
      const result = response.data
      if (result.code === 0) {
        this.goods = result.data
        this.foods = this.goods[0].foods
        Vue.nextTick(() => {
          // 初始化滚动框
          this.initScroller()
        })
      }
    })
  },
  methods: {
    initScroller () {
      this.foodsWrapper = new BScroll(this.$refs.foodsWrapper, {
        probeType: 3,
        click: true
      })
    },
    goodClick (index) {
      this.currentIndex = index
      this.foods = this.goods[index].foods
      // 切换了左侧菜品分类栏。下一帧刷新右侧滚动框
      Vue.nextTick(() => {
        this.foodsWrapper.refresh()
      })
    },
    foodClick (food, isAdd) {
      if (isAdd) {
        if (!food.count) {
          Vue.set(food, 'count', 1)
        } else {
          food.count++
        }
      } else {
        food.count--
      }
    }
  },
  computed: {
    shopTotalPrice () {
      let totalPrice = 0
      this.goods.forEach(good => {
        good.foods.forEach(food => {
          if (food.count) {
            totalPrice += food.count * food.price
          }
        })
      })
      return totalPrice
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixins.styl';

.goods {
  position: absolute;
  display: flex;
  width: 100%;
  top: 190px;
  bottom: 40px;
  overflow: hidden;

  .menu_wrapper {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;

    .current {
      color: red;
    }

    .menu_item {
      display: table;
      width: 56px;
      height: 54px;
      padding: 0 12px;
      line-height: 14px;

      .menu_text {
        display: table-cell;
        width: 56px;
        vertical-align: middle;
        border_1px(rgba(7, 17, 27, 0.1));
        font-size: 12px;

        .icon {
          display: inline-block;
          vertical-align: top;
          width: 12px;
          height: 12px;
          margin-right: 2px;
          background-size: 12px 12px;
          background-repeat: no-repeat;
        }

        .special {
          bg_image('special_3');
        }

        .decrease {
          bg_image('decrease_3');
        }

        .discount {
          bg_image('discount_3');
        }

        .guarantee {
          bg_image('guarantee_3');
        }

        .invoice {
          bg_image('invoice_3');
        }
      }
    }
  }

  .foods_wrapper {
    flex: 1;

    .food_item {
      display: flex;
      margin: 20px;
      border_1px(7, 17, 27, 0.1);

      .icon {
        width: 58px;
        height: 58px;
        margin-right: 10px;
      }

      .content {
        flex: 1;

        .name {
          margin-top: 2px;
          margin-bottom: 8px;
          font-size: 14px;
          line-height: 14px;
        }

        .desc, .extra {
          margin-bottom: 8px;
          font-size: 10px;
          line-height: 14px;
        }

        .extra {
          .count {
            margin-right: 10px;
          }
        }

        .price {
          margin-bottom: 8px;
          font-size: 12px;

          .now {
            color: rgb(240, 20, 20);
          }

          .old {
            color: rgb(147, 153, 159);
            text-decoration: line-through;
          }
        }
      }

      .control {
        position: absolute;
        display: flex;
        right: 0px;
        bottom: 10px;

        .icon-remove_circle_outline, .icon-add_circle {
          font-size: 24px;
          color: rgb(0, 160, 220);
          padding: 5px;
        }

        .count {
          line-height: 24px;
          font-size: 14px;
          padding: 5px;
          text-align: center;
        }
      }
    }
  }

  .shopping_cart {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;

    .tatloPrice {
      text-align: center;
      background-color: red;
    }
  }
}
</style>
